import './index.less';
import React, { useEffect, useRef, useState } from 'react';
import {
  TreeSelect,
  Button,
  Space,
  DatePicker,
  Switch,
  Input,
  notification,
} from 'antd';
const { TextArea } = Input;
import request from 'umi-request';
import { history } from 'umi';
import moment from 'moment';
export default function Index() {
  // 查看消息通知api
  const [api, contextHolder] = notification.useNotification();
  const [treeData, setTreeData] = useState([]);
  const options = [
    {
      value: 'zhejiang',
      label: 'Zhejiang',
      children: [
        {
          value: 'hangzhou',
          label: 'Hangzhou',
          children: [
            {
              value: 'xihu',
              label: 'West Lake',
            },
          ],
        },
      ],
    },
    {
      value: 'jiangsu',
      label: 'Jiangsu',
      children: [
        {
          value: 'nanjing',
          label: 'Nanjing',
          children: [
            {
              value: 'zhonghuamen',
              label: 'Zhong Hua Men',
            },
          ],
        },
      ],
    },
  ];
  const [namevalue, setNameValue] = useState(''); //公告名称
  const [value, setValue] = useState(''); //所属类别   // 书选择
  const [stateval, setstateVal] = useState(true); // 修改状态
  const [receive, setreceive] = useState(''); // 接收人
  const [contentval, setcontent] = useState(''); //公告内容
  // 添加公告类别
  const onChangeTree = (newValue) => {
    setValue(newValue);
  };
  // 添加名称
  const addName = (abd) => {
    setNameValue(abd);
  };
  // 添加时间
  const { RangePicker } = DatePicker;
  const [timeval, settimeval] = useState('2022-10-10 10:12:24'); // 时间
  const onChange = (value, dateString) => {
    // console.log('Selected Time: ', value._d);
    // console.log('Formatted Selected Time: ', dateString);
    settimeval(dateString);
  };
  // 添加状态
  const changeState = (checked) => {
    // console.log(checked, 'asdasdasdas')
    setstateVal(checked);
  };
  const onOk = (value) => {
    // console.log('onOk: ', value);
  };
  // 添加内容
  const onChangeArea = (e) => {
    // console.log('Change:', e);
    setcontent(e);
  };
  useEffect(() => {
    renderList();
    // console.log(history.location.query, 'history')
  }, []);
  const [_id, set_id] = useState({});
  // 表格列
  const columnss = [
    {
      title: '',
      dataIndex: 'id',
      width: 20,
      ellipsis: true,
      render: (text, data, index) => {
        // console.log(selectedRowKeys,'key')
        return (
          <div>
            <input
              type="checkbox"
              checked={selectedRowKeys === data._id ? true : false}
              name=""
              id={data._id}
              onChange={(e) => {
                editChk(e, data._id);
              }}
            />
          </div>
        );
      },
    },
    {
      title: '',
      dataIndex: 'id',
      width: 60,
      ellipsis: true,
      align: 'center',
      render: (text, data, index) => index + 1,
    },
    {
      title: '公告名称',
      dataIndex: 'title',
      width: 150,
      ellipsis: true,
    },
    {
      title: '公开',
      dataIndex: 'isstate',
      width: 30,
      align: 'center',
      ellipsis: true,
      render: (_, data) => (
        <Space size="middle">
          <span style={{ textAlign: 'center' }}>
            {data.isstate === true ? '是' : ''}
          </span>
        </Space>
      ),
    },
    {
      title: '接收人员',
      dataIndex: 'reveive',
      width: 150,
      ellipsis: true,
    },
    {
      title: '公告时间',
      dataIndex: 'publish',
      width: 80,
      align: 'center',
      ellipsis: true,
    },
    {
      title: '创建人',
      dataIndex: 'createFather',
      width: 50,
      ellipsis: true,
      align: 'center',
    },
  ];
  const renderList = () => {
    request('/api/hyq/get_noticeClassFy', { method: 'get' }).then((res) => {
      setTreeData(res.data);
    });
    request('/api/hyq/getone', {
      method: 'post',
      data: { key: history.location.query.key },
    }).then((res) => {
      // console.log(res.data[0], res.namesort, '接收到的筛选')
      set_id(res.data[0]._id);
      nameref.current.value = res.data[0].title;
      settimeval(res.data[0].publish);
      if (res.namesort.length === 1) {
        onChangeTree(res.namesort[0].classfyName);
      }
      let a = '';
      res.data[0].content.forEach((item) => (a += item));
      // textarearef.current.resizableTextArea.textArea.value = a
      setcontent(a);
      // console.log(a, 'aaaaaaa')
    });
  };
  const nameref = useRef();
  const receiveref = useRef();
  const textarearef = useRef();
  const timeref = useRef();
  const addToNode = () => {
    if (namevalue !== '') {
      if (value !== '') {
        if (timeval !== '') {
          if (contentval !== '') {
            request('/api/hyq/editnotice', {
              method: 'post',
              data: {
                _id: _id,
                title: namevalue,
                noticeClassId: value,
                publish: timeval,
                isstate: stateval,
                reveive: receive,
                content: contentval,
                createFather: 'hq',
              },
            }).then((res) => {
              api.open({
                message: '消息提示',
                description: res.msg,
                duration: 2,
              });
            });
          } else {
            api.open({
              message: '消息提示',
              description: '公告内容不能为空',
              duration: 2,
            });
          }
        } else {
          api.open({
            message: '消息提示',
            description: '公告日期不能为空',
            duration: 2,
          });
        }
      } else {
        api.open({
          message: '消息提示',
          description: '所属类别不能为空',
          duration: 2,
        });
      }
    } else {
      api.open({
        message: '消息提示',
        description: '公告名称不能为空',
        duration: 2,
      });
    }
  };
  const clearValues = () => {
    onChangeTree(null); //树
    onChange(''); // 时间
    changeState(true); //状态
    nameref.current.value = ''; //公告名称
    receiveref.current.value = ''; // 接受者
    textarearef.current.resizableTextArea.textArea.value = ''; // 内容
  };
  return (
    <div>
      <>{contextHolder}</>
      <div className="add_top">
        <div className="MeansRightHeadBtn">
          <Button
            onClick={() => {
              // console.log(namevalue, value, timeval, stateval, receive, contentval, '保存数据')
              addToNode();
            }}
          >
            保存
          </Button>
          <Button
            onClick={() => {
              history.push('/notice/notice_manager');
            }}
            style={{ marginLeft: '15px' }}
          >
            返回
          </Button>
        </div>
        <div style={{ height: '600px', backgroundColor: '#ffffff' }}>
          <div className="addForm">
            <div className="addFormLeft">
              公告名称 <span style={{ color: 'red' }}>*</span>:
            </div>
            <div>
              <input
                type="text"
                ref={nameref}
                className="add_input"
                style={{ width: '465px', height: '28px', paddingLeft: '5px' }}
                onBlur={(e) => {
                  addName(e.target.value);
                }}
              />
            </div>
          </div>
          <div className="addForm">
            <div className="addFormLeft">
              所属类别 <span style={{ color: 'red' }}>*</span>:
            </div>
            <div>
              <TreeSelect
                // showSearch
                treeLine
                style={{
                  width: '250px',
                }}
                value={value}
                dropdownStyle={{
                  maxHeight: 400,
                  // overflow: 'auto',
                }}
                placeholder="Please select"
                allowClear
                treeDefaultExpandAll
                onChange={onChangeTree}
                treeData={treeData}
                fieldNames={{
                  value: '_id',
                  label: 'classfyName',
                }}
              />
            </div>
          </div>
          <div className="addForm">
            <div className="addFormLeft">
              公告日期 <span style={{ color: 'red' }}>*</span>:
            </div>
            <div>
              <Space direction="vertical" size={12}>
                <DatePicker
                  ref={timeref}
                  showTime
                  onChange={onChange}
                  onOk={onOk}
                  defaultValue={moment(timeval)}
                />
              </Space>
            </div>
          </div>
          <div className="addForm">
            <div className="addFormLeft">
              是否公开 <span style={{ color: 'red' }}>*</span>:
            </div>
            <div>
              <Switch
                checkedChildren="公开"
                unCheckedChildren="不公开"
                defaultChecked={stateval}
                onChange={(checked) => {
                  changeState(checked);
                }}
              />
            </div>
          </div>
          <div className="addForm" style={!stateval ? {} : { display: 'none' }}>
            <div className="addFormLeft">
              接收人 <span style={{ color: 'red' }}>*</span>:
            </div>
            <div>
              <input
                type="text"
                ref={receiveref}
                className="add_input"
                style={{ width: '465px', height: '28px', paddingLeft: '5px' }}
                onBlur={(e) => {
                  setreceive(e.target.value);
                }}
              />
            </div>
          </div>
          <div className="addcontent">
            <div className="addcontentLeft">
              公告内容 <span style={{ color: 'red' }}>*</span>:
            </div>
            <div>
              <TextArea
                showCount
                allowClear
                maxLength={250}
                ref={textarearef}
                onChange={(e) => {
                  onChangeArea(e.target.value);
                }}
                rows={8}
                cols={100}
                value={contentval}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
